<template>
    <div class="app-container">
        <el-form ref="postForm" :rules="rules" :model="postForm" label-position="left" label-width="70px" style="margin-left: 50px">
            <el-form-item label="标识" prop="identity" label-width="140px">
                <el-input v-model="postForm.identity" type="text" placeholder="请输入模板标识" />
            </el-form-item>
            <el-form-item label="名称" prop="name" label-width="140px">
                <el-input v-model="postForm.name" type="text" placeholder="请输入模板名称" />
            </el-form-item>
            <el-form-item label="类型" prop="type" label-width="140px">
                <el-select v-model="postForm.type">
                    <el-option value="0" label="模拟设备">模拟设备</el-option>
                    <el-option value="5-1" label="电脑">电脑</el-option>
                </el-select>
            </el-form-item>
            <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="submitForm">
                保存
            </el-button>
        </el-form>
    </div>
</template>

<script>
import { get, create, update } from '@/iot/api/device/device'

const defaultForm = {
    identity: '',
    name: '',
    type: ''
}

export default {
    props: {
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    data() {
        const validateRequire = (rule, value, callback) => {
            if (value === '' || value === null || value === undefined) {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            postForm: Object.assign({}, defaultForm),
            loading: false,
            rules: {
                identity: [{ validator: validateRequire, message: '标识为必填字段', trigger: 'blur' }],
                name: [{ validator: validateRequire, message: '名称为必填字段', trigger: 'blur' }]
            }
        }
    },
    created() {
        if (this.isEdit) {
            this.fetchData()
        }
    },
    methods: {
        fetchData() {
            get({
                id: this.$route.query.id
            }).then(res => {
                this.postForm.identity = res.data.identity
                this.postForm.name = res.data.name
                this.postForm.type = res.data.type
            })
        },
        submitForm() {
            this.$refs.postForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = this.postForm
                    if (this.isEdit === true) {
                        data.id = this.$route.query.id
                        update(data).then(response => {
                            this.$notify({
                                title: '成功',
                                message: '修改成功',
                                type: 'success',
                                duration: 2000
                            })
                            // this.postForm.status = 'published'
                            this.loading = false
                            this.fetchData()
                            // this.$router.push('/store/index')
                        }).catch(err => {
                            console.log(err)
                            this.loading = false
                        })
                    } else {
                        create(data).then(response => {
                            this.$notify({
                                title: '成功',
                                message: '添加成功',
                                type: 'success',
                                duration: 2000
                            })
                            // this.postForm.status = 'published'
                            this.loading = false
                            this.$router.push('/iot/device')
                        }).catch(err => {
                            console.log(err)
                            this.loading = false
                        })
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style>
</style>
